<template>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
            <el-breadcrumb-item>cmdb</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <!-- IP地址/端口扫描 -->
        <el-button type="" @click="dialogScanVisible = true">IP/PORT扫描</el-button>
        <el-dialog title="IP/PORT扫描" v-model="dialogScanVisible">
            <el-form :model="form">
                <el-form-item label="扫描地址" :label-width="formLabelWidth" prop="scanip">
                    <el-input v-model="form.scanip" placeholder="扫描地址"></el-input>
                </el-form-item>
                <el-form-item label="扫描端口" :label-width="formLabelWidth" prop="scanport">
                    <el-input v-model="form.scanport" placeholder="扫描端口,如果扫描整个网络,端口号随便填写">
                    </el-input>
                </el-form-item>
            </el-form>
            <div>
                <span class="dialog-footer">
                    <el-button @click="dialogScanVisible = false">取 消</el-button>
                    <el-button type="primary" @click="executeButton">执 行</el-button>
                </span>
            </div>
        </el-dialog>
        <!-- 自动导入 -->
        <el-button style="margin-left: 10px;" type="" @click="dialogUploadVisible = true">文件导入</el-button>
        <el-dialog title="导入文件" v-model="dialogUploadVisible">
            <el-upload class="upload-demo" action="" ref="upload" accept=".xlsx,.xls,.csv" :limit="limitnum"
                :http-request="uploadSectionFile" :auto-upload="true" :file-list="fileList">

                <el-button size="small" type="primary">点击上传</el-button>
                <template #tip>
                    <div class="el-upload__tip">* 目前一次只能上传一个文件</div>
                </template>
            </el-upload>
        </el-dialog>


        <!-- Form -->
        <el-button style="margin-left: 10px;" type="" @click="dialogFormVisible = true">手动录入</el-button>

        <el-dialog title="主机信息录入" v-model="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="主机名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" class="putwidth"></el-input>
                </el-form-item>
                <el-form-item label="主机IP" :label-width="formLabelWidth" :rules="rules.ipaddrs" prop="ip">
                    <el-input v-model="form.ip" autocomplete="off" class="putwidth"></el-input>
                    <el-tooltip effect="light" content="192.168.1.1" placement="right-start">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="主机掩码" :label-width="formLabelWidth" :rules="rules.ipaddrs" prop="network">
                    <el-input v-model="form.network" autocomplete="off" class="putwidth">

                    </el-input>
                    <el-tooltip effect="light" content="255.255.255.0" placement="right-start">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="主机磁盘" :label-width="formLabelWidth" :rules="rules.vG" prop="disk">
                    <el-input v-model="form.disk" autocomplete="off" class="putwidth">
                    </el-input>
                    <el-tooltip effect="light" content="只能是数字且是整数" placement="right-start">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="主机CPU" :label-width="formLabelWidth" :rules="rules.vG" prop="cpu">
                    <el-input v-model="form.cpu" autocomplete="off" class="putwidth"></el-input>
                    <el-tooltip effect="light" content="只能是数字且是整数" placement="right-start">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="主机内存" :label-width="formLabelWidth" :rules="rules.vG" prop="memory">
                    <el-input v-model="form.memory" autocomplete="off" class="putwidth"></el-input>
                    <el-tooltip effect="light" content="只能是数字且是整数" placement="right-start">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>

            <div>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </div>
        </el-dialog>

        <div class="listdata">
            <listData></listData>
        </div>
    </div>

</template>

<script>
    import {
        manualInfo,
        execFile,
        execute
    } from '@/utils/common.js';
    import rules from '@/utils/rules.js'
    import listData from './CmdbListData.vue'

    export default {
        components: {
            listData
        },
        data() {

            return {
                fileList: [],
                limitnum: 1,
                dialogScanVisible: false,
                dialogFormVisible: false,
                dialogUploadVisible: false,
                form: {
                    name: '',
                    ip: '',
                    network: '',
                    disk: '',
                    cpu: '',
                    memory: '',
                    scanip: '',
                    scanport: ''
                },
                formLabelWidth: '120px',
                rules,
            };
        },
        methods: {
            //自定义上传
            uploadSectionFile(param) {
                var fileObj = param.file;
                var form = new FormData();
                // 文件对象
                form.append("file", fileObj);
                execFile(form).then(res => {

                    if (res.code == "200") {
                        this.$message("上传成功")
                    } else {
                        this.$message("上传失败")
                    }
                    this.$router.go(0)
                }).catch(({
                    err
                }) => {
                    param.onError(err)
                })
            },
            async submitForm() {
                // 手动录入数据上传
                var mInfo = {
                    name: this.form.name,
                    ip: this.form.ip,
                    network: this.form.network,
                    disk: this.form.disk + "G",
                    cpu: this.form.cpu + "C",
                    memory: this.form.memory + "G",
                }
                await manualInfo(mInfo).then((result) => {
                    if (result.code == "200") {

                        this.$message(result.msg)
                    }
                    if (result.code == "201") {
                        this.$message(result.msg)
                    }
                    this.$router.go(0)
                }).catch((err) => {
                    console.log(err)
                    this.$router.go(0)
                });
            },
            async executeButton() {

                var executeData = {
                    ip: this.form.scanip,
                    port: this.form.scanport
                }
                await execute(executeData).then(res => {
                    if (res.code == "200") {
                        this.$message(res.msg)
                    } else {
                        this.$message(res.errmsg)
                    }
                    this.$router.go(0)
                })

            }


        },


    }
</script>
<style scoped>
    .putwidth {
        width: 220px;
    }

    .dialog-footer {
        margin-left: 100px;
    }

    .upload-demo /deep/ .el-upload--text {
        width: auto;
        border: unset;
        height: auto;
    }

    .listdata {
        margin-top: 10px;
    }
</style>